<template>
    <v-chart :options="chartOptions" :theme="theme" ref="myChart"></v-chart>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/dataZoom'
// theme
import walden from './theme/walden.json'
export default {
    name: "index",
    components: {
        'v-chart': ECharts
    },
    props: {
        title: {
            type: String,
            default () {
                return '数据图表';
            }
        },
        data: {
            type: [Object],
            default () {
                return {
                    xAxis: [

                    ],
                    yAxis: [

                    ],
                    series: [
                        {
                            label: '字段1',
                            value: [1,2,3,4,5]
                        },
                        {
                            label: '字段2',
                            value: [5,4,3,2,1]
                        },
                    ]
                }
            }
        },
        loading: {
            type: [Boolean],
            default() {
                return false;
            }
        }
    },
    data () {
        return {
            options: {
                title: {
                    text: '',
                    //textAlign: "right",
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            // backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        dataView: {readOnly: false},
                        // magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                },
                series: []
            },
            theme: walden.theme,
        };
    },
    computed: {
        chartOptions () {
            return this.$helper.deepClone(Object.assign({}, this.options, this.data));
            // 使用jquery的 extend方法进行深拷贝
            // let $ = require('jquery');
            // let options = $.extend(true, {}, this.options);
            // options.title.text = this.title;
            // options.xAxis = $.extend(true, this.data.xAxis, this.options.xAxis);
            // options.yAxis = $.extend(true, this.data.yAxis, this.options.yAxis);
            // this.data.series.map(v => {
            //     options.legend.data.push(v.label);
            //     options.series.push({
            //         name: v.label,
            //         type: 'line',
            //         smooth: true,
            //         data: v.value,
            //     });
            // });
        //     return options;
        }
    },
    watch: {
        loading(val) {
            val ? this.$refs.myChart.showLoading() : this.$refs.myChart.hideLoading();
        }
    },
    created() {
        this.$nextTick(() => {
            this.$emit('callback', this.$refs.myChart);
            // setInterval(() => {
            //     this.$refs.myChart.appendData({seriesIndex: 0, data: [100]})
                // this.$refs.myChart.resize();
            // }, 2000)
            //  根据窗口大小调整曲线大小
            let that = this;
            window.addEventListener("resize", function() {
                that.$refs.myChart.resize();
            });
        });
    }
}
</script>

<style scoped>
.echarts {
    width: 100%;
    height: 100%;
    min-height: 500px;
}
</style>
